<div class="multi-level-tree">
  <!-- 搜索框 -->
  <div class="tree-search-box" ng-if="searchable">
    <input
      type="text"
      class="tree-search-input"
      ng-model="searchKeyword"
      ng-change="handleSearch()"
      placeholder="{{ searchPlaceholder || '搜索节点...' }}"
    />
    <span class="tree-search-icon">🔍</span>
    <span class="tree-search-clear" ng-if="searchKeyword" ng-click="clearSearch()">✕</span>
    <div class="tree-search-result" ng-if="searchKeyword && searchResults.length > 0">
      找到 {{ searchResults.length }} 个匹配项
    </div>
    <div class="tree-search-result" ng-if="searchKeyword && searchResults.length === 0">
      未找到匹配项
    </div>
  </div>

  <!-- 树列表 -->
  <ul class="tree-list">
    <li class="tree-node" ng-repeat="node in treeData" id="tree-node-{{ node[idField] }}">
      <div class="tree-node-content" ng-class="{'highlighted': node.highlighted}">
        <span class="tree-node-toggle" ng-if="hasChildren(node)" ng-click="toggleExpand(node, $event)">
          <i class="toggle-icon" ng-class="{'expanded': node.expanded}">›</i>
        </span>
        <span class="tree-node-toggle-placeholder" ng-if="!hasChildren(node)"></span>

        <label class="tree-node-label">
          <input
            type="checkbox"
            ng-checked="node.checked"
            ng-click="toggleCheck(node); $event.stopPropagation();"
            class="tree-checkbox"
            ng-class="{'indeterminate': node.indeterminate}"
          />
          <span class="tree-node-text" ng-bind-html="highlightText(node[labelField])"></span>
        </label>
      </div>

      <ul class="tree-children" ng-if="hasChildren(node) && node.expanded">
        <li class="tree-node" ng-repeat="child in node.children" ng-include="'tree-node-recursive.html'"></li>
      </ul>
    </li>
  </ul>
</div>

<script type="text/ng-template" id="tree-node-recursive.html">
  <div class="tree-node-content" ng-class="{'highlighted': child.highlighted}" id="tree-node-{{ child[idField] }}">
    <span class="tree-node-toggle" ng-if="hasChildren(child)" ng-click="toggleExpand(child, $event)">
      <i class="toggle-icon" ng-class="{'expanded': child.expanded}">›</i>
    </span>
    <span class="tree-node-toggle-placeholder" ng-if="!hasChildren(child)"></span>

    <label class="tree-node-label">
      <input
        type="checkbox"
        ng-checked="child.checked"
        ng-click="toggleCheck(child); $event.stopPropagation();"
        class="tree-checkbox"
        ng-class="{'indeterminate': child.indeterminate}"
      />
      <span class="tree-node-text" ng-bind-html="highlightText(child[labelField])"></span>
    </label>
  </div>

  <ul class="tree-children" ng-if="hasChildren(child) && child.expanded">
    <li class="tree-node" ng-repeat="child in child.children" ng-include="'tree-node-recursive.html'"></li>
  </ul>
</script>
